<template>
    <view class="page">
        <view class="page-form">
            <view class="company-head">
                <img v-if="logo_Image.url==''" :src="File_Url+'upload-img.png'" @click="uploadAvatar('file/upload-img')"/>
                <img v-if="logo_Image.url!=''" :src="logo_Image.url" @click="uploadAvatar('file/upload-img')"/>
                <text>点击上传logo</text>
            </view>
            <view class="page-form-certificate">
                <view class="certificate-head">
                    <view class="title">营业执照</view>
                </view>
                <view class="certificate-content" @click="uploadAvatar('file/businessLicenseUpload')">
                    <img v-if="license_Image.url!=''" :src="license_Image.url" mode="widthFix" />
                    <view class="btn" v-if="license_Image.url==''">
                        <img :src="File_Url+'add-a.png'" />
                        <text>上传营业执照副本</text>
                    </view>
                </view>
            </view>
            <view class="company-form-item">
                <text>单位名称</text>
                <input type="text" placeholder="请输入单位名称" v-model="unit_name">
            </view>
            <view class="company-form-item">
                <text>统一社会信用代码</text>
                <input type="text" placeholder="请输入信用代码" v-model="uniform_code">
            </view>
            <view class="company-form-place">
                <view class="form-place-top">
                    <text>单位所在地区</text>
                    <picker class="item-picker" mode="region" :value="region" :custom-item="customItem" @change="regionChange">
                        <!--                        <text>{{region[0]}},{{region[1]}},{{region[2]}}</text>-->
                        <text v-if="region.length>0 && region[0] != '全部'">{{region[2]=='全部'?(region[1]=='全部'?region[0]:region[1]):region[2]}}</text>
                        <text v-if="region.length == 0 || region[0] == '全部'">请选择</text>
                        <img :src="File_Url+'right-grey.png'" />
                    </picker>
                </view>
                <view class="form-palce-bottom">
                    <input placeholder="请输入详细地址" v-model="address"/>
                </view>
            </view>
            <view class="company-form-item">
                <text>联系人</text>
                <input type="text" placeholder="请输入联系人姓名" v-model="contactsName">
            </view>
            <view class="company-form-item">
                <text>联系方式</text>
                <input type="text" placeholder="请输入联系方式" v-model="phoneNumber">
            </view>
            <view class="company-form-item">
                <text>E-mail</text>
                <input type="text" placeholder="请输入电子邮箱" v-model="contactsEmail">
            </view>
            <view class="company-form-item">
                <text>是否成为单位管理员</text>
                <switch class="item-switch" :checked="switchType" @change="switchChange" />
            </view>
<!--            <view class="company-form-range">-->
<!--                <view class="range-title">-->
<!--                    <view class="content-left">-->
<!--                        <text>业务范围</text>-->
<!--                        <input type="text" placeholder="单个标签最多4个字" v-model="rangeWords"/>-->
<!--                    </view>-->
<!--                    <view class="content-right">-->
<!--                        <img :src="File_Url+'tip-add.png'" @click="addRangeList"/>-->
<!--                    </view>-->
<!--                </view>-->
<!--                <view class="range-content">-->
<!--                    <view class="item" v-for="(item ,index) in rangeList" :key="index">-->
<!--                        <text>{{item}}</text>-->
<!--                        <img :src="File_Url+'delete-grey.png'" @click="delRange(index)"/>-->
<!--                    </view>-->
<!--&lt;!&ndash;                    <view class="content-left">&ndash;&gt;-->
<!--&lt;!&ndash;                        <text class="tixing">单个标签最多4个字</text>&ndash;&gt;-->
<!--&lt;!&ndash;                    </view>&ndash;&gt;-->
<!--&lt;!&ndash;                    <view class="content-right">&ndash;&gt;-->
<!--&lt;!&ndash;                        <img :src="File_Url+'tip-add.png'" />&ndash;&gt;-->
<!--&lt;!&ndash;                    </view>&ndash;&gt;-->
<!--                </view>-->
<!--            </view>-->
<!--            <view class="company-form-desc">-->
<!--                <view class="desc-title">单位简介</view>-->
<!--                <view class="desc-text">-->
<!--                    <textarea auto-height="true" placeholder="请填写相关的单位简介，可以简单地介绍一下自身的业务范围和服务对象" v-model="desc"></textarea>-->
<!--                </view>-->
<!--            </view>-->
        </view>
        <view class="page-btn">
            <button @click="submitUnitSettledApply">提交入驻申请</button>
        </view>
    </view>
</template>

<script>
    let Provinces = require('../../utils/provinces');
    export default {
        name: "myCompany",
        data(){
            return{
                File_Url: this.$api.FILE_URL,
                logo_Image:{
                    url: '',
                    id:''
                },//logo
                license_Image: {
                    url: '',
                    id:''
                }, //营业执照
                region: [],
                customItem: '全部',
                unit_name:'',
                uniform_code: '',
                address:'',
                phoneNumber: '',
                rangeList: [],
                rangeWords: '',
                desc: '',
                contactsName: '',
                contactsEmail: '',
                switchType: true,
                is_unit_admin: 1
            }
        },
        methods:{
            switchChange(e){
                if (e.detail.value) {
                    this.is_unit_admin = 1;
                }else {
                    this.is_unit_admin = 0;
                }
            },
            //单位入驻申请
            async submitUnitSettledApply(){
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    unit_name: this.unit_name,
                    uniform_social_credit_code: this.uniform_code,
                    province: this.region[0],
                    city: this.region[1],
                    area: this.region[2],
                    address: this.address,
                    license_img_id: this.license_Image.id,
                    logo_id: this.logo_Image.id,
                    contact_number: this.phoneNumber,
                    contact_person: this.contactsName,
                    email: this.contactsEmail,
                    is_unit_admin: this.is_unit_admin
                }
                const res = await this.$api.submitUnitSettledApply(params);
                if (res.data.level == 'success'){
                    uni.showToast({
                        icon: 'success',
                        title: res.data.message,
                        duration: 1500
                    })
                    this.getTemplate();
                    /*setTimeout(function () {
                        uni.navigateBack({
                            delta: 1
                        })
                    },1500)*/
                } else {
                    uni.showToast({
                        icon: 'none',
                        title: res.data.message,
                        duration: 1500
                    })
                }
            },
            //获取订阅消息模板id
            async getTemplate(){
                const res = await this.$api.getTemplate({type: 'company_set'});
                if (res.data.level == 'success'){
                    wx.requestSubscribeMessage({
                        tmplIds: res.data.data,
                        success(res){
                            console.log(res);
                        },
                        complete(res){
                            setTimeout(function () {
                                uni.navigateBack({
                                    delta: 1
                                })
                            },1500)
                        }
                    })
                }
            },
            //上传图片
            async uploadAvatar(url){
                let res=await this.$currency.upLoadImage(this,url)
                let data=JSON.parse(res.data)
                if(data.level!='success'){
                    uni.showToast({
                        title:data.message,
                        icon:'none'
                    })
                }else {
                    if (url == 'file/upload-img') {
                        this.logo_Image={
                            url:data.data.img_url,
                            id:data.data.id
                        }
                    }else {
                        this.license_Image={
                            url:data.data.img_url,
                            id:data.data.id
                        }
                        this.getBusinessLicenseInfo();
                    }
                }
            },
            //获取营业执照信息
            async getBusinessLicenseInfo(){
                let params = {
                    img_id : this.license_Image.id
                }
                const res = await this.$api.getBusinessLicenseInfo(params);
                if (res.data.level == 'success'){
                    this.region[1] = res.data.unit_address.city;
                    this.region[2] = res.data.unit_address.area;
                    this.getProvinces(res.data.unit_address.city);
                    this.address = res.data.unit_address.address;
                    this.unit_name = res.data.data.a != "无" ? res.data.data.a : "";
                    this.uniform_code = res.data.data.b != "无" ? res.data.data.b : "";
                }else {
                    uni.showToast({
                        title:res.data.message,
                        icon:'none',
                        duration: 1500
                    })
                }
            },
            //添加标签
            addRangeList(){
                if (this.rangeList.length==0){
                    this.rangeList.push(this.rangeWords);
                }else {
                    if (!this.rangeList.includes(this.rangeWords)) {
                        this.rangeList.push(this.rangeWords);
                    }
                }
                this.rangeWords = '';
            },
            //删除标签
            delRange(id){
                this.rangeList.splice(id,1);
            },
            //通过市获取省
            getProvinces(city){
                Provinces.forEach((item,index) => {
                    item.city.forEach((itt, idx) => {
                        if (itt.name == city) {
                            let str = this.region;
                            str[0] = item.name;
                            this.region = [];
                            this.region = str;
                        }
                    })
                })
            },
            regionChange(e){
                console.log(e)
                this.region = e.detail.value;
            }
        }
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .page{
        min-height: 100vh;
        background: #F8F8F8;
        @include flex(flex-start,flex-start);
        flex-direction: column;
    }
    .page-form{
        background: #FFFFFF;
        width: 100vw;
        .company-head{
            padding: 30rpx 0;
            @include flex();
            flex-direction: column;
            border-bottom: 1rpx solid #E5E5E5;
            img{
                width: 184rpx;
                height: 184rpx;
                border-radius: 360rpx;
            }
            text{
                height: 40rpx;
                line-height: 40rpx;
                font-size: 28rpx;
            }
        }
        .page-form-certificate{
            padding: 24rpx 30rpx;
            border-bottom: 1rpx solid #E5E5E5;
            .certificate-head{
                padding: 14rpx 0;
                @include flex(flex-start);
                flex-direction: row;
                .title{
                    height: 45rpx;
                    line-height: 45rpx;
                    font-size: 32rpx;
                }
                .example{
                    margin-left: auto;
                    font-size: 32rpx;
                    height: 45rpx;
                    line-height: 45rpx;
                    color: #0A5FEC;
                }
            }
            .certificate-content{
                border: 1rpx dashed #0A5FEC;
                border-radius: 8rpx;
                @include flex();
                flex-direction: column;
                overflow: hidden;
                .btn{
                    padding: 72rpx 0;
                    @include flex();
                    flex-direction: column;
                    img{
                        width: 124rpx;
                        height: 124rpx;
                        margin-bottom: 20rpx;
                    }
                    text{
                        color: #666666;
                        font-size: 32rpx;
                        height: 45rpx;
                        line-height: 45rpx;
                    }
                }
            }
        }
        .company-form-item{
            padding:38rpx 30rpx;
            border-bottom: 1rpx solid #E5E5E5;
            @include flex(flex-start);
            flex-direction: row;
            text{
                height: 45rpx;
                line-height: 45rpx;
                font-size: 32rpx;
            }
            input{
                margin-left: auto;
                max-width: 75%;
                width: auto;
                height: 45rpx;
                line-height: 45rpx;
                font-size: 32rpx;
                text-align: right;
            }
            .item-switch{
                margin-left: auto;
                transform:scale(0.7)
            }
        }
        .company-form-place{
            padding: 30rpx;
            border-bottom: 1rpx solid #E5E5E5;
            .form-place-top{
                @include flex(flex-start);
                flex-direction: row;
                padding-bottom: 24rpx;
                text{
                    height: 45rpx;
                    line-height: 45rpx;
                    font-size: 32rpx;
                }
                .item-picker{
                    margin-left: auto;
                    @include flex(flex-end);
                    flex-direction: row;
                    text{
                        font-size: 32rpx;
                        line-height: 45rpx;
                        height: 45rpx;
                        color: #999999;
                    }
                    img{
                        width: 30rpx;
                        height: 30rpx;
                    }
                }
            }
            .form-palce-bottom{
                input{
                    width: 100%;
                    height: 45rpx;
                    line-height: 45rpx;
                }
            }
        }
        .company-form-range{
            border-bottom: 1rpx solid #E5E5E5;
            padding: 30rpx;
            .range-title{
                @include flex(flex-start);
                flex-direction: row;
                padding-bottom: 24rpx;
                .content-left{
                    @include flex(flex-start);
                    flex-direction: row;
                    width: calc(100% - 60rpx);
                    text{
                        height: 45rpx;
                        line-height: 45rpx;
                        font-size: 32rpx;
                        margin-right: 20rpx;
                    }
                    input{
                        margin-left: auto;
                        height: 45rpx;
                        line-height: 45rpx;
                        font-size: 32rpx;
                        text-align: right;
                    }
                }
                .content-right{
                    margin-left: auto;
                    width: 40rpx;
                    height: 40rpx;
                }
            }
            .range-content{
                @include flex(flex-start);
                flex-direction: row;
                .item{
                    height: 40rpx;
                    padding: 0;
                    background: #3782FF;
                    border-radius: 8rpx;
                    margin-right: 10rpx;
                    @include flex(flex-start);
                    flex-direction: row;
                    text{
                        height: 30rpx;
                        line-height: 30rpx;
                        color: #FFFFFF;
                        font-size: 28rpx;
                        padding: 0 10rpx 0 20rpx;
                    }
                    img{
                        width: 30rpx;
                        height: 30rpx;
                    }
                }
            }
        }
        .company-form-desc{
            padding: 30rpx;
            .desc-title{
                height: 45rpx;
                line-height: 45rpx;
                font-size: 32rpx;
                padding-bottom: 24rpx;
            }
            .desc-text{
                width: 100%;
                textarea{
                    min-height: 90rpx;
                    width: 100%;
                    line-height: 45rpx;
                    font-size: 32rpx;
                }
            }
        }
    }
    .page-btn{
        margin-top: auto;
        padding: 60rpx 30rpx;
        width: calc(100vw - 60rpx);
        button{
            width: 100%;
            height: 88rpx;
            line-height: 88rpx;
            color: #FFFFFF;
            background: #3782FF;
            font-size: 34rpx;
            border-radius: 44rpx;
        }
    }
</style>